<link rel="stylesheet" href="__STATIC__/system/js/dtree/dtree.css">
<link rel="stylesheet" href="__STATIC__/system/js/dtree/font/dtreefont.css">
  
<form class="layui-form" action="{:url()}" method="post">
<div class="layui-tab-item layui-show">
    <div class="layui-form-item">
        <label class="layui-form-label">角色名称</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input field-name" name="name" lay-verify="required" autocomplete="off" placeholder="请输入角色名称">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">角色简介</label>
        <div class="layui-input-inline">
            <textarea  class="layui-textarea field-intro" name="intro" lay-verify="" autocomplete="off" placeholder="[选填]角色简介"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">角色状态</label>
        <div class="layui-input-inline">
            <input type="radio" class="field-status" name="status" value="1" title="启用" checked>
            <input type="radio" class="field-status" name="status" value="0" title="禁用">
        </div>
    </div>
</div>
<div class="layui-tab-item layui-form">
    <div class="layui-form-item">
    	<ul id="authShow" class="dtree" data-id="0" data-value="001"></ul>
    </div>
</div>
<div class="layui-form-item">
    <div class="layui-input-block">
        <input type="hidden" class="field-id" name="id">
        <button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="formSubmitAuth">提交</button>
        <a href="{:url('role')}" class="layui-btn layui-btn-primary ml10"><i class="aicon ai-fanhui"></i>返回</a>
        <div style="display:none;" id="formBtn"></div>
    </div>
</div>
</form>
{include file="block/layui" /}
<script>
var formData = {:json_encode($formData)};
layui.extend({
    dtree: 'dtree/dtree'
}).use(['jquery', 'form', 'func', 'element', 'dtree'], function() {
    var $ = layui.jquery, form = layui.form, element = layui.element;dtree = layui.dtree;
    layui.func.assign(formData);
    
    // 解决tab和form一起使用时候，会出现tab框切换不了
    element.on('tab(mimo-tab)', function(data){
        $(".layui-tab-item").each(function (item) {
            $(this).removeClass('layui-show');
            if(item === data.index){
                $(this).addClass('layui-show');
            }
        });
    });
    
 	// 初始化树
    var authTree = dtree.render({
    	elem: "#authShow",
    	checkbar: true,
    	checkbarType: 'p-casc',
    	//initLevel:3,
    	line:true,
    	skin: "layui",
    	checkbarFun: {
    	    chooseBefore: function($i, node){
    	    	if (node.checked == 0) {
    	    		var pidParams = dtree.getAllParentParam(authTree, node.nodeId);
    	    		for (var i in pidParams){
    	    			dtree.chooseDataInit("authShow", pidParams[i].nodeId);
    	    		}
    	    	}
    	    	return true;
    	    }
    	},
    	data: {:json_encode($menus, 1)} // 使用data加载
    });
 	// 绑定节点点击事件
    dtree.on("node(authShow)", function(obj){
    	var nodeId = obj.param.nodeId;
    	authTree.clickNodeCheckbar(nodeId);// 点击节点选中复选框
    	if (obj.param.checked == 0) {
    		var pidParams = dtree.getAllParentParam(authTree, obj.param.nodeId);
    		for (var i in pidParams){
    			dtree.chooseDataInit("authShow", pidParams[i].nodeId);
    		}
    	}
    });

    /**
     * 监听表单提交
     * @attr action 请求地址
     * @attr data-form 表单DOM
     */
    form.on('submit(formSubmitAuth)', function(data) {
    	var auth = [];
    	var params = authTree.getCheckbarNodesParam("authShow");
    	console.log(params);
    	for(var i in params){
    		auth.push(params[i].nodeId);
    	}
    	var authStr = auth.join(',');
    	
        var _form = '', 
            that = $(this), 
            text = that.text(),
            opt = {},
            def = {pop: false, refresh: true, jump: false, callback: null, time: 3000};
        if ($(this).attr('data-form')) {
            _form = $(that.attr('data-form'));
        } else {
            _form = $(data.form);
        }

        if (that.attr('hisi-data')) {
            opt = new Function('return '+ that.attr('hisi-data'))();
        } else if (that.attr('lay-data')) {
            opt = new Function('return '+ that.attr('lay-data'))();
        }

        opt = Object.assign({}, def, opt);

        /* CKEditor专用 */
        if (typeof(CKEDITOR) != 'undefined') {
            for (instance in CKEDITOR.instances) {
                CKEDITOR.instances[instance].updateElement();
            }
        }
        that.removeClass('layui-btn-normal').addClass('layui-btn-disabled').prop('disabled', true).text('提交中...');
        $.ajax({
            type: "POST",
            url: _form.attr('action'),
            data: _form.serialize()+"&auth_str="+authStr,
            success: function(res) {
                that.removeClass("layui-btn-disabled");
                if (res.code == 0) {
                    that.text(res.msg).prop('disabled', false).removeClass('layui-btn-normal').addClass('layui-btn-danger');
                    setTimeout(function(){
                        that.removeClass('layui-btn-danger').addClass('layui-btn-normal').text(text);
                    }, opt.time);
                } else {
                    if (opt.callback) {
                        opt.callback(that, res);
                    } else {
                        that.addClass('layui-btn-normal').text(res.msg);
                        setTimeout(function() {
                            that.text(text).prop('disabled', false);
                            if (opt.pop == true) {
                                if (opt.refresh == true) {
                                    parent.location.reload();
                                } else if (opt.jump == true && res.url != '') {
                                    parent.location.href = res.url;
                                }
                                parent.layui.layer.closeAll();
                            } else if (opt.refresh == true) {
                                if (res.url != '') {
                                    location.href = res.url;
                                } else {
                                    history.back(-1);
                                }
                            }
                        }, opt.time);
                    }
                }
            }
        });
        return false;
    });
    
});
</script>